// 侧边栏
// 1.侧边栏显示/隐藏
var pos = 0;
asideShowHide();
asideSlide();

$(window).scroll(function () {
  //当改变滚动条位置时触发scroll事件，通过回调函数处理滚动后的结果
  asideShowHide();
  //2.滑动到指定区域修改aside中li标签的样式
  asideSlide();
});

//3回到顶部.
$(".to-top").click(function () {
  slideToArea(0, 1000);
});

//4.快速定位到指定区域
$("aside li").click(function () {
  console.log($(this).text()); //获取单击的当前li标签的文本内容
  let txt = $(this).text();
  if (txt == "手机") {
    slideToArea(800, 500);
  } else if (txt == "笔记本") {
    slideToArea(1300, 500);
  } else if (txt == "平板") {
    slideToArea(1600, 500);
  } else if (txt == "智能穿戴") {
    slideToArea(2000, 500);
  } else if (txt == "智能家具") {
    slideToArea(2320, 500);
  } else if (txt == "电视") {
    slideToArea(2700, 500);
  }
});

function asideShowHide() {
  pos = Math.floor($(this).scrollTop()); //在控制台输出滚动条的位置值。
  //console.log(pos);   测试完毕过后注释掉
  if (pos >= 800) {
    $("aside").fadeIn(1000);
  } else {
    $("aside").fadeOut(1000);
  }
} //console:控制台，log:以日志方式显示结果，Math:熟悉类，floor:向下取整，scrollTop():滚动条的位置

//为当前li标签 删除和添加 active类
function addCls(index) {
  $("aside li").removeClass("active"); //移除所有li标签上的class为active的类
  $("aside li").eq(index).addClass("active"); //为第一个li标签添加active类
}

//	//滑动到指定区域修改aside中li标签的样式
function asideSlide() {
  if (pos >= 800 && pos < 1300) {
    addCls(0);
  } else if (pos >= 1300 && pos < 1600) {
    addCls(1);
  } else if (pos >= 1600 && pos < 2000) {
    addCls(2);
  } else if (pos >= 2000 && pos < 2320) {
    addCls(3);
  } else if (pos >= 2320 && pos < 2700) {
    addCls(4);
  } else {
    addCls(5);
  }
}

//
function slideToArea(st, time) {
  $(window.opera ? "html" : "html,body").animate(
    {
      scrollTop: st,
    },
    time
  );
}

// 当后端还没能提供数据接口时，前端工程师需要根据UI图进行数据模拟，这个过程叫Mock。
// 获取Mock数据
$.ajax({
  type: "get", // 请求方法
  url: "./mock/data.json",
}).then(
  (res) => {
    // 请求成功
    let banner = res.results;
    let data = res.results;
    console.log(banner);
    //将banner数据绑定到id为banner的模板上
    const tpl = template("banner", banner);
    //将模板渲染到网页中
    $(".swiper-wrapper").append(tpl);
    // 轮播图
    var mySwiper = new Swiper(".swiper", {
      loop: true, // 循环模式选项
      autoplay: true,

      // 如果需要分页器
      pagination: {
        el: ".swiper-pagination",
      },

      // 如果需要前进后退按钮
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
    });

    // 精品推荐
    let bsGoods = data.goods["精品推荐"];
    bsGoods = {
      bsGoods: bsGoods,
    };
    console.log(bsGoods);
    let bstpl = template("bs", bsGoods);
    $(".goods-list").append(bstpl);
  },
  (err) => {
    // 请求失败
    throw err;
  }
);
